<template>
<div>
  <!-- 上传组件还需后期扩展 比如大文件上传下载 组件外部支持传入文件列表数据 -->
  <el-upload
    ref="uploadRef"
    class="upload-file"
    name="upfile"
    :action="data.action"
    :multiple='multiple'
    :limit="limit"
    :accept="accept"
    :show-file-list='false'
    :on-exceed="handleExceed"
    :before-upload='beforeUpload'
    :on-success='onSuccess'
    :on-progress='onProgress'
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</div>
<div class="file-list" v-if="isShowFileList">
  <div class="file-list-item" v-for="item in data.fileList" :key="item.id">
    <span>{{item.originalName}}</span>
    <!-- 文件大小 -->
    <span>{{renderSize(item.size)}}</span>
    <i class="el-icon-download" title="下载" @click="downFile(item)"></i>
    <i class="el-icon-delete" title="删除" @click="clickDeleteUpload(item)"></i>
  </div>
</div>
<el-card class="upload-list" v-if="data.visibleList">
  <template #header>
    <span>上传文件列表</span>
    <i class="el-icon-close" @click="data.visibleList = false"></i>
  </template>
  <el-table
    :data="data.uploadFileList"
    style="width: 100%">
    <el-table-column prop="name" label="文件名称" min-width="150" show-overflow-tooltip></el-table-column>
    <el-table-column prop="size" label="文件大小">
      <template #default="scope">
        {{renderSize(scope.row.size)}}
      </template>
    </el-table-column>
    <el-table-column prop="percentage" label="上传速度">
      <template #default="scope">
        {{scope.row.percentage.toFixed(2)}}%
      </template>
    </el-table-column>
  </el-table>
</el-card>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
import { downData } from '@/utils/dataStreamConversion'
interface Data {
  action: string,
  uploadFileList: any[],
  visibleList: boolean,
  fileList: any[]
}
export default defineComponent({
  name: 'upload',
  props: {
    fileList: { //双向绑定文件列表值
      type: Array,
      default: () => []
    },
    limit: { //默认没有文件个数限制
      type: Number,
      default: 0
    },
    multiple: { //默认单选
      type: Boolean,
      default: true
    },
    accept: { //上传类型
      type: String,
      default: ""
    },
    isShowFileList: {
      type: Boolean,
      default: true
    },
    // 删除方式 true 真删 false 假删
    deleteWay: { 
      type: Boolean,
      default: false
    }
    
  },
  setup(props, context) {
    const store = useStore()
    const data = reactive<Data>({
      action: `${process.env.VUE_APP_API_URL}/dfs/upload/file?token=${store.getters.getToken}`,
      uploadFileList: [],
      visibleList: false,
      fileList: []
    })
    const uploadRef = ref()
    const fileList = ref()
    watch(()=>props.fileList,(val)=>{
        fileList.value = val
    })
    watch(() => fileList.value,(val)=>{
        context.emit('update:fileList',val)
    })
    // 上传文件之前
    const beforeUpload = () => {
      if(!data.visibleList) {
        data.visibleList = true
      }
    }
    // 文件正在上传时
    const onProgress = (event: any, file: any, fileList: any) => {
      data.uploadFileList = fileList
    }
    // 上传成功
    const onSuccess = (res:any) => {
      console.log(res.data);
      data.fileList.push(res.data)
    }
    // 下载文件
    const downFile = (data: any) => {
      downData(data.url, data.name)
    }
    // 删除文件
    const clickDeleteUpload = (data: any) => {
      if(props.deleteWay) { //真删除
        console.log(11);
      }else {
        data.fileList.splice(data.fileList.findIndex((item: { id: any }) => item.id === data.id), 1)
      }
    }
    // 文件超出个数限制时
    const handleExceed = () => {
      ElMessage.warning({
        message: `最多上传${props.limit}个`,
        type: 'warning'
      });
    }
    // 格式化文件大小
    const renderSize = (value: number) =>{
      if (null == value) {
        return 0
      }
      const unitArr = ['B', 'K', 'M', 'G']
      let index = 0;
      while (value > 1024) {
        index++;
        value = value / 1024;
      }
      const size = value.toFixed(2);
      return size + unitArr[index];
    }
    return {
      data,
      fileList,
      uploadRef,
      handleExceed,
      onSuccess,
      beforeUpload,
      onProgress,
      renderSize,
      downFile,
      clickDeleteUpload
    }
  },
})
</script>
<style lang="scss" scoped>
.file-list-item {
  display: flex;
  align-items: center;
  margin-top: 10px;
  i {
    margin-left: 14px;
    font-size: 16px;
    cursor: pointer;
  }
  .el-icon-download {
    color: blue;
  }
  .el-icon-delete {
    color: red;
  }
}
.upload-list {
  position: fixed;
  bottom: 50px;
  right: 50px;
  height: 300px;
  width: 500px;
  background: #ffffff;
  z-index: 99999999999;
  /deep/.el-card__header {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    i {
      font-size: 18px;
      cursor: pointer;
    }
  }
  /deep/ .el-card__body {
    width: 100%;
    padding: 0 10px;
    height: calc(100% - 40px);
    overflow-y: auto;
  }
}
.operation {
  i {
    font-size: 18px;
    margin-right: 5px;
    cursor: pointer;
    &:last-child {
      margin: 0;
    }
  }
}
</style>
